import dash
from dash import html
import feffery_antd_components as fac

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdAffix(
            fac.AntdRow(
                fac.AntdTitle('XXX业务监测系统', level=3),
                style={
                    'boxShadow': '0 6px 16px rgb(107 147 224 / 14%)',
                    'height': '70px',
                    'padding': '20px 20px',
                    'zIndex': 999,
                    'background': '#ffffff'
                }
            )
        ),
        html.Div(
            [
                fac.AntdRow(
                    [
                        fac.AntdCol(
                            html.Div(
                                [
                                    fac.AntdStatistic(
                                        value=1515,
                                        valueStyle={
                                            'fontSize': '28px',
                                            'fontWeight': 'bold'
                                        },
                                    ),
                                    fac.AntdParagraph(
                                        [
                                            fac.AntdText(
                                                '相较于同期上升',
                                                style={
                                                    'color': 'rgb(85, 85, 85)',
                                                    'fontSize': '15px'
                                                }
                                            ),
                                            fac.AntdText(
                                                '16.5%',
                                                strong=True,
                                                style={
                                                    'color': 'rgb(255, 87, 77)',
                                                    'fontSize': '16px'
                                                }
                                            ),
                                        ]
                                    )
                                ],
                                style={
                                    'padding': '20px 30px',
                                    'borderRadius': '15px',
                                    'border': '1px solid transparent',
                                    'boxShadow': '0 5px 30px 0 rgb(0 0 0 / 7%)',
                                    'background': '#ffffff'
                                }
                            ),
                            flex=1
                        )
                        for i in range(5)
                    ],
                    gutter=20
                ),
                fac.AntdRow(
                    [
                        fac.AntdCol(
                            html.Div(
                                style={
                                    'height': '100%',
                                    'boxShadow': '0 6px 16px rgb(107 147 224 / 14%)',
                                    'borderRadius': '15px',
                                    'background': '#ffffff'
                                }
                            ),
                            span=8,
                            style={
                                'paddingRight': '10px'
                            }
                        ),
                        fac.AntdCol(
                            html.Div(
                                [
                                    html.Div(
                                        style={
                                            'height': 'calc(50% - 10px)',
                                            'marginBottom': '20px',
                                            'boxShadow': '0 6px 16px rgb(107 147 224 / 14%)',
                                            'borderRadius': '15px',
                                            'background': '#ffffff'
                                        }
                                    ),
                                    html.Div(
                                        style={
                                            'height': 'calc(50% - 10px)',
                                            'boxShadow': '0 6px 16px rgb(107 147 224 / 14%)',
                                            'borderRadius': '15px',
                                            'background': '#ffffff'
                                        }
                                    ),
                                ],
                                style={
                                    'height': '100%',
                                }
                            ),
                            span=8,
                            style={
                                'padding': '0 10px'
                            }
                        ),
                        fac.AntdCol(
                            html.Div(
                                style={
                                    'height': '100%',
                                    'boxShadow': '0 6px 16px rgb(107 147 224 / 14%)',
                                    'borderRadius': '15px',
                                    'background': '#ffffff'
                                }
                            ),
                            span=8,
                            style={
                                'paddingLeft': '10px'
                            }
                        ),
                    ],
                    style={
                        'height': '400px',
                        'marginTop': '20px'
                    }
                ),
                fac.AntdRow(
                    [
                        fac.AntdParagraph('测试' * 1000)
                    ],
                    style={
                        'marginTop': '20px'
                    }
                )
            ],
            style={
                'padding': '20px',
                # 设置最底层颜色
                'backgroundColor': '#F6F8F9'
            }
        ),
    ]
)

if __name__ == '__main__':
    app.run_server(debug=True)
